<script lang="ts">
import {
	reactive,
	toRefs,
	watchEffect,
	PropType,
} from "vue";

// import { unploadFile } from "@/api/commonApi.js";

import {
	showToast,
	showLoadingToast, 
	closeToast
} from "vant";
import 'vant/es/toast/style';
// import { getFilePath } from "@/utils/east.js";

export default {
	props: {
		limit: {
			type: Number,
			default: 6,
		},
		label: {
			type: String,
			default: "上传图片",
		},
		// 文件类型格式校验
		fileType: {
			type: Array,
			default: () => ["doc", "xls", "ppt", "txt", "pdf"],
		},
		accept: {
			type: String,
			default: "image/*",
		},
		//是否禁用上传
		disabled: {
			type: Boolean,
			default: false,
		},
		//是否展示删除按钮
		deletable: {
			type: Boolean,
			default: true,
		},
		//是否自定义上传区域
		defaultSlot: {
			type: Boolean,
			default: false,
		},
		// 预览区域大小
		preview: {
			type: Array as PropType<any>,
			default: () =>[90, 90],
		},
		modelValue: [String, Object, Array],
	},
	setup(props: any, {
		emit
	}) {
		const data: any = reactive({
			showPreview: false,
			fileList: [],
			urlList: []
		});
		watchEffect(() => {
			if (props.modelValue != "" && props.modelValue) {
				data.fileList = [];
				props.modelValue.split(",").map((item) => {
					data.fileList.push({
						url: item,
					});
				});
			}
		});
		// 返回布尔值  校验文件类型是否正确
		const beforeRead = (file) => {
			let fileExtension = "";
			if (file.name.lastIndexOf(".") > -1) {
				fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
			}
			const isTypeOk = props.fileType.some((type) => {
				if (file.type.indexOf(type) > -1) return true;
				if (fileExtension && fileExtension.indexOf(type) > -1) return true;
				return false;
			});

			if (!isTypeOk) {
				showToast(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`);
				return false;
			}
			return true;
		};
		const afterRead = (file, index) => {
			showLoadingToast({
				message: "上传中...",
				forbidClick: true,
			});
			if (file.length) {
				file.forEach((item, eq) => {
					setTimeout(() => {
						uploadFileServer(item);
					}, 1000);
				});
			} else {
				uploadFileServer(file);
			}
		};
		//上传方法调用服务
		function uploadFileServer(file) {
			let imgFile = new FormData();
			imgFile.append("file", file.file);
			// unploadFile(imgFile).then((res) => {
			// 	closeToast();
			// 	if (res.code == 200) {
			// 		data.fileList.push({
			// 			url: res.result[0].objectUrl,
			// 		});
			// 		emit("update:modelValue", urlToString(data.fileList));
			// 	} else {
			// 		file.status = "failed";
			// 		file.message = "上传失败";
			// 	}
			// });
		}
		//删除文件
		const deleteUrl = (file, index) => {
			data.fileList.splice(index.index, 1);
			emit("update:modelValue", urlToString(data.fileList));
		};
		//处理文件
		const urlToString = (list) => {
			let urlList: object[] = [];
			list.map((item) => {
				if (item.url) {
					urlList.push(item.url);
				}
			});
			return urlList.toString();
		};
		//预览文件  此处采用的是京东的 nutui    本项目中未引入需要的话自己实现一下吧
		// function haddelPreview() {
		// 	const videosArr = getFilePath(data.fileList);
		// 	let videosList = [];
		// 	videosArr.forEach((videosItem) => {
		// 		videosList.push({
		// 			source: {
		// 				src: videosItem,
		// 				type: "video/mp4",
		// 			},
		// 			options: {
		// 				muted: true,
		// 				controls: true,
		// 				autoplay: true,
		// 			},
		// 		});
		// 	});
		// 	data.videoData = videosList;
		// 	data.showPreview = true;
		// }
		return {
			data,
			// haddelPreview,
			afterRead,
			deleteUrl,
			beforeRead,
		};
	},
};
</script>

<template>
	<div>
		<van-uploader class="image" :max-count="limit" v-model="data.fileList" :before-read="beforeRead"
			:after-read="afterRead" :before-delete="deleteUrl" multiple capture="camera" :accept="accept"
			mutiple="mutiple" :deletable="deletable" :preview-size="preview" :disabled="disabled">

			<template v-if="!defaultSlot">
				<div class="uploader">
					<van-icon name="plus" />
					{{ label+defaultSlot }}
				</div>
			</template>

			<template v-if="defaultSlot">
				<slot name="default"></slot>
			</template>
		</van-uploader>
	</div>
</template>

<style lang="less" scoped>
	.image {
		:deep(.van-uploader__preview-image) {
			width: 100%;
			height: 100%;
		}

		.uploader {
			width: 90px;
			height: 90px;
			border: 1px solid #eee;
			border-radius: 6px;
			font-size: 12px;
			color: #999999;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			&-image {
				width: 312px;
				height: 200px;
			}
		}
	}
</style>
